<template>
  <div class="login">
    <el-card class="box-card">
      <div class="login-title">欢迎来到图书管理系统</div>
      <el-form :model="loginForm" status-icon :rules="loginRules" ref="loginForm" size="medium">
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-user-solid" type="text" v-model="loginForm.username" autocomplete="off"
            placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-s-cooperation" type="password" v-model="loginForm.password" autocomplete="off"
            placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">立即登录</el-button>
          <el-button @click="resetForm">立即注册</el-button>
        </el-form-item>
      </el-form>
      <div v-if="loginType !== 1">
        <el-button type="text" @click="loginType = 1">切换到管理员登陆</el-button>
      </div>
      <div v-else>
        <el-button type="text" @click="loginType = 2">切换到用户登陆</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getLogin } from '@/request'
import { userLogin } from '@/request/user'

export default {
  data () {
    return {
      loginType: 2,
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 8, message: '用户名长度在2~8之间！', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 12, message: '密码长度在3~12之间！', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm () {
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) return this.$message.error('请输入有效的用户名和密码！')
        let data = null
        if (this.loginType === 1) {
          data = await getLogin(this.loginForm)
        } else {
          data = await userLogin(this.loginForm)
        }
        // console.log(data);
        if (data.code !== 200) {
          return this.$message.error(data.msg)
        } else {
          window.sessionStorage.setItem('token', JSON.stringify(data.data.token))
          window.sessionStorage.setItem('user', JSON.stringify(data.data.user))
          // this.$message.success(data.msg)
          this.$router.push('/home')
        }
      })
    },
    resetForm () {
      this.$router.push('/regist')
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  position: relative;
  height: 100%;
  color: $font-color;
  background-color: rgba($color: #000000, $alpha: 0.4);

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("../assets/imgs/bg.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    filter: blur(3px);
    // z-index: 1;
  }

  .box-card {
    z-index: 200;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%);
    min-width: 500px;
    padding: 30px;
  }

  .login-title {
    font-size: 20px;
    margin-bottom: 50px;
  }
}
</style>
